<template>
  <div class="container">
    <div class="search_box">
      <input type="text" class="search_input" placeholder="请输入员工名称" v-model="workername" @input="searchWorker">
    </div>
    <!-- <view class="i-index-demo">
      <i-index height="100%">
        <i-index-item v-for="item in employeeList" :key="item.user_id" :data-userid="item.user_id" @tap="checkEmployee">
          <div class="employee_li flex">
            <span class="user_pic"><img :src="item.headurl || '/static/imgs/system_user.png'" alt=""></span>
            <div class="user_info flex-item">
              <label class="user_name">{{item.username}}</label>
              <label class="user_details">{{item.position}}&nbsp;&nbsp;&nbsp;{{item.dept_name}}</label>
            </div>
          </div>
        </i-index-item>
      </i-index>
    </view> -->
    <ul class="employee_ul" v-if="employeeList.length > 0">
      <li class="employee_li flex" v-for="item in employeeList" :key="item.user_id" :data-userid="item.user_id" @tap="checkEmployee">
        <span class="user_pic"><img :src="item.headurl || '/static/imgs/system_user.png'" alt=""></span>
        <div class="user_info flex-item">
          <label class="user_name">{{item.username}}</label>
          <label class="user_details">{{item.position}}&nbsp;&nbsp;&nbsp;{{item.dept_name}}</label>
        </div>
      </li>
    </ul>
    <Empty message="暂无员工列表！" v-if="employeeList.length == 0"></Empty>
  </div>
</template>

<script>
import wx from 'wx'
import api from '@/utils/api'
import Empty from '@/components/empty'
export default {
  data () {
    return {
      employeeList: [],
      workername: ''
    }
  },

  components: {
    Empty
  },
  onLoad () {
  },
  methods: {
    searchWorker () {
      console.log(this.workername)
      this.getMyuser()
    },
    async getMyuser () {
      let floor = wx.getStorageSync('userInfo').floor
      let jsonshop = wx.getStorageSync('userInfo').jsonshop
      let departmentid = wx.getStorageSync('userInfo').departmentid
      let ismanage = wx.getStorageSync('userInfo').ismanage
      const res = await api.getmyworker({ floor: floor, jsonshop: jsonshop, departmentid: departmentid, ismanage: ismanage, workername: this.workername });
      if (res.code === '100') {
        let workerdata = [];
        // let workerPin = new Array(26);
        // const words = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
        // workerPin.forEach((item, index) => {
        //   workerPin[index] = {
        //     key: item,
        //     list: []
        //   }
        // })
        // for (var k = 0; k < res.data.length; k++) {
        //   let firstName = res.data[k].name.substring(0, 1);
        //   let index = words.indexOf(firstName);
        //   console.log(firstName)
        //   workerPin[index].list.push({
        //     name: res.data[k].name,
        //     key: firstName,
        //     'user_id': res.data[k].id,
        //     'username': res.data[k].name,
        //     'lastname': res.data[k].name.charAt(res.data[k].name.length - 1),
        //     'position': res.data[k].zhichengname + '·' + res.data[k].positionname,
        //     'dept_name': res.data[k].shopname,
        //     'headurl': res.data[k].headurl
        //   });
        // }
        // console.log(workerPin)
        for (var i = 0; i < res.data.length; i++) {
          workerdata.push({
            'user_id': res.data[i].id,
            'username': res.data[i].name,
            'lastname': res.data[i].name.charAt(res.data[i].name.length - 1),
            'position': res.data[i].zhichengname + '·' + res.data[i].positionname,
            'dept_name': res.data[i].shopname,
            'headurl': res.data[i].headurl
          })
        }
        this.employeeList = workerdata
        console.log(this.employeeList)
      } else {
        this.employeeList = []
      }
    },
    checkEmployee (e) {
      let userid = e.mp.currentTarget.dataset.userid;
      wx.setStorageSync('params_userid', userid)
      wx.navigateTo({
        url: '/pages/worker/checkEmployees/checkEmployees'
      })
    }
  },
  created () {
  },
  onShow () {
    wx.setNavigationBarTitle({
      title: '员工管理'
    })
    this.getMyuser()
  },
  onReady () {
  }
}
</script>

<style scoped>
view {
  -webkit-overflow-scrolling: touch;
}
.container {
  padding-top: 96rpx;
  background-color:#fff;
}
.search_box {
  width: 100%;
  padding: 30rpx 30rpx 20rpx;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(153, 153, 153, 0.1);
}
.search_input {
  height: 64rpx;
  box-sizing: border-box;
  padding: 14rpx 33rpx;
  background: #fff;
  border-radius: 32rpx;
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
  position: relative;
  z-index: 1;
}
.search_input::after {
  content: "";
  position: absolute;
  right: 30rpx;
  top: 20rpx;
  width: 23rpx;
  height: 29rpx;
  background: url(http://mytimg.178mr.com/search_btn.png) no-repeat;
  background-size: 100%;
  z-index: 2;
}
.employee_ul {
  width: 100%;
  padding-left: 32rpx;
  background: #fff;
}
.employee_ul .employee_li {
  width: 100%;
  padding: 28rpx 0;
  border-bottom: 2rpx solid RGBA(153, 153, 153, 0.2);
}
.employee_ul .employee_li .user_pic {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.employee_ul .employee_li img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.employee_ul .employee_li .user_info label {
  display: block;
}
.employee_ul .employee_li .user_info .user_name {
  font-size: 32rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: rgba(102, 102, 102, 1);
  margin-bottom: 10rpx;
}
.employee_ul .employee_li .user_info .user_details {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
</style>
